<template>
    <div class="common-layout">
        <el-container>
            <el-header style="display: flex; justify-content: center;">
                <div style="width: 20%; text-align: center; line-height: 60px; background-color: brown; font-size: larger ; font-weight: bolder; color: white;">
                    新增房型
                </div>
            </el-header>
            <el-main style="display: flex; flex-direction: column; align-items: center; height: 100%; margin-top: 40px;">
                <el-form class="el-form" label-width="80px" :model="roomInfo">
                    <!-- <el-form-item label="图片"> -->
                        <!-- <el-input
                        v-model="roomInfo.roomImage"
                        autocomplete="off"
                        style="width: 340px;"
                        ></el-input> -->
                        <!-- <el-upload
                            class="upload-demo"
                            action="/photo/upload"
                            :on-success="handleUploadSuccess"
                            :on-error="handleUploadError"
                            :before-upload="beforeUpload"
                            :data="{ id: roomInfo.id }"
                            >
                            <el-button style="background-color: brown; color: white;">点击上传</el-button>
                        </el-upload>
                        <img v-if="roomInfo.roomImage" :src="roomInfo.roomImage" alt="图片预览" style="width: 100px; height: auto; margin-top: 10px;"> -->
                    <!-- </el-form-item> -->
                    <el-form-item label="房型">
                        <el-input
                        v-model="roomInfo.type"
                        autocomplete="off"
                        style="width: 340px;"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="价格">
                        <el-input
                        v-model="roomInfo.price"
                        autocomplete="off"
                        style="width: 340px;"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="可住人数">
                        <el-input
                        v-model="roomInfo.peopleNum"
                        autocomplete="off"
                        style="width: 340px;"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="床数">
                        <el-input
                        v-model="roomInfo.bedNum"
                        autocomplete="off"
                        style="width: 340px;"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="总量">
                        <el-input
                        v-model="roomInfo.sumRoom"
                        autocomplete="off"
                        style="width: 340px;"
                        ></el-input>
                    </el-form-item>
                </el-form>
            </el-main>
            <el-footer style="display: flex; justify-content: center; margin-top: 40px;">
                <div style="width: 30%; display: flex; justify-content: space-between;">
                    <el-button style="background-color: brown; color: white; width: 150px;" @click="goSubmit">提交</el-button>
                    <el-button style="background-color: brown; color: white; width: 150px;" @click="goBack">返回</el-button>
                </div>
            </el-footer>
        </el-container>
    </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue';
import request from "@/utils/request";
import { ElMessage } from 'element-plus'; 
import { useRouter } from 'vue-router'
const router = useRouter();

const roomInfo = ref({
    roomImage: '',
    type: '',
    price: '',
    peopleNum: '',
    bedNum: '',
    sumRoom: ''
})

const goSubmit = async() => {
    try {
        const res = await request.post('/room/add', roomInfo.value);
        if(res.code === '0') {
            ElMessage({
                message: '提交成功',
                type: 'success'
            });
        }
    } catch (error) {
        ElMessage({
            message: error,
            type: 'error'
        });
    }
};

const goBack = () => {
    router.push('/admin');
};

</script>

<style lang="less" scoped>

</style>